<template>
	<view class="container">
		<view class="time-pick">
			<view class="time-num" @tap="startShow=true">
				{{startTime}}<u-icon name="arrow-down" color="#000" size="28"></u-icon>
			</view>
			<view class="time-center">
				到
			</view>
			<view class="time-num" @tap="endShow=true">
				{{endTime}}<u-icon name="arrow-down" color="#000" size="28"></u-icon>
			</view>
			<view class="time-btn" @tap="queryDataHandle">
				查询
			</view>
		</view>

		<view class="house-center">
			<view class="center-left">
				已售/可售
			</view>
			<view class="center-right">
				出租率
				<view class="center-btn1">
					>=50%
				</view>
				<view class="center-btn1" style="background: #FFF8C6;">
					＜50%
				</view>
			</view>
		</view>

		<view class="house-table" v-if="futureList.length>0">
			<view class="table-left">
				<view class="table-left-top">
					<view class="table-left-title">
						日期
					</view>
					<view class="table-left-title2">
						房型
					</view>
				</view>
				<view class="house-list">
					<view class="house-type" v-for="(item,index) in futureList[0].roomTypeStatList">
						{{item.roomTypeName}}
					</view>
				</view>
				<view class="house-type" style="font-size: 14px;font-weight: 600;">
					合计
				</view>
				<view class="house-type" style="font-size: 14px;font-weight: 600;">
					出租率
				</view>

			</view>
			<scroll-view :scroll-x="true" style="width: 600rpx;">
				<view class="table-right">

					<view class="right-top" v-for="(item,index) in futureList" :key="index">
						<view class="right-right-list">
							<view class="right-top-item">
								<text>{{item.formattedDate}}</text>
								<text style="margin-top: 20rpx;font-size: 20rpx;">{{item.dayOfWeek}}</text>
							</view>
						</view>
						<view class="num-list">
							<view class="num-item" v-for="(data,i) in item.roomTypeStatList" :key="i">
								<view class="num-btn" :class="{ 'high-occupancy': data.occupancyRoomCount/data.roomCount >= 0.5 }">
									{{data.occupancyRoomCount}}/{{data.roomCount}}
								</view>
							</view>

						</view>
						<view class="total-list">
							<view class="num-item">
								<view class="num-btn" :class="{ 'high-occupancy': item.totalOccupancyRoomCount/item.totalRoomCount >= 0.5 }">
									{{item.totalOccupancyRoomCount}}/{{item.totalRoomCount}}
								</view>
							</view>
							<view class="num-item">
								<view class="num-btn"  :class="{ 'high-occupancy': item.occupancyRate >= 0.5 }">
									{{Number(item.occupancyRate*100).toFixed(1) }}%
								</view>
							</view>
						</view>



					</view>
					<!-- <view class="num-list">
						<view class="num-item">
							<view class="num-btn">
								2/4
							</view>
						</view>
					</view> -->

				</view>
			</scroll-view>
			<u-picker :default-time="endTime" @confirm="selectEndTime" v-model="endShow" mode="time"></u-picker>
			<u-picker :default-time="startTime" @confirm="selectStartTime" v-model="startShow" mode="time"></u-picker>
		</view>
	</view>
</template>

<script>
	import {
		futureList
	} from '../../api/house.js'
	export default {
		data() {
			return {
				futureList: [],
				startShow: false, //开始时间选择
				startTime: "2024-06-26", //开始时间
				endTime: "2024-06-26",
				endShow: false, //最后时间选择
			};
		},
		onLoad() {
			
			const currentTime = new Date();
			
			// 获取当前时间的年份、月份、日期
			const currentYear = currentTime.getFullYear();
			const currentMonth = currentTime.getMonth() + 1;  // getMonth() 返回的是0-11，所以需要+1
			const currentDate = currentTime.getDate();
			
			// 计算后一个星期的日期
			const endDate = new Date(currentYear, currentMonth - 1, currentDate + 7); // 月份需要减1，因为getMonth()返回的是0-11
			const endMonth = endDate.getMonth() + 1;  // 同样需要+1
			const endDay = endDate.getDate();
			
			// 将日期格式化为字符串，并确保月份和天数小于10时加上0
			this.startTime = `${currentYear}-${currentMonth < 10 ? '0' : ''}${currentMonth}-${currentDate < 10 ? '0' : ''}${currentDate}`;
			this.endTime = `${endDate.getFullYear()}-${endMonth < 10 ? '0' : ''}${endMonth}-${endDay < 10 ? '0' : ''}${endDay}`;


			this.getFutureList()
		},
		computed: {

			// 计算属性用于判断占用率是否大于50%
			occupancyRate() {
				return data => {
					return data.occupancyRoomCount / data.roomCount;
				};
			},
		},
		methods: {
			// 查询
			queryDataHandle() {
				// 将字符串转换为 Date 对象
				const startDate = new Date(this.startTime);
				const endDate = new Date(this.endTime);
				
				// 结束时间不早于开始时间
				if (endDate < startDate) {
					uni.showToast({
						title: "结束时间不能早于开始时间",
						icon: 'none'
					})
					return false;
				}

				// 获取两个日期之间的月份差
				  const monthDifference = endDate.getMonth() - startDate.getMonth();
				
				  // 时间范围不能超过两个月
				  const maxMonthDifference = 2;
				
				// 检查时间差是否不超过两个月
				if (monthDifference > maxMonthDifference) {
					uni.showToast({
						title: "时间跨度暂不支持超过两个月",
						icon: 'none'
					})
					return false;
				}
				 // 获取年份
				  const startYear = this.startTime.substring(0, 4);
				  const endYear = this.endTime.substring(0, 4);
				
				  // 确保年份相同
				  if (startYear !== endYear) {
					  uni.showToast({
					  	title: "时间跨度暂不支持超过两个月",
					  	icon: 'none'
					  })
				    return false;
				  }
				this.getFutureList()
			},
			// 选择结束时间
			selectEndTime(e) {
				this.endTime = e.year + '-' + e.month + '-' + e.day
			},
			// 选择开始时间
			selectStartTime(e) {
				this.startTime = e.year + '-' + e.month + '-' + e.day
			},
			// 时间处理
			formatBusinessDay(dateString) {
				// 将字符串转换为 Date 对象
				const date = new Date(dateString);

				// 获取星期几（0 表示星期日，1 表示星期一，依此类推）
				const dayOfWeek = date.getDay();
				const daysOfWeek = ['日', '一', '二', '三', '四', '五', '六'];
				const day = daysOfWeek[dayOfWeek];

				// 获取月份和日期
				let month = date.getMonth() + 1; // 月份是从0开始的，所以加1
				if (month < 10) {
					month = '0' + month
				}
				let dayOfMonth = date.getDate();
				if (dayOfMonth < 10) {
					dayOfMonth = '0' + dayOfMonth
				}

				// 格式化日期，例如 "06-20"
				const formattedDate = `${month}/${dayOfMonth}`;

				return {
					day,
					formattedDate
				};
			},
			// 获取远期房态列表
			async getFutureList() {
				const res = await futureList({
					startDate: this.startTime,
					endDate: this.endTime
				})
				this.futureList = res.data

				// 遍历数组，并添加星期几和格式化日期
				this.futureList.forEach(item => {
					const formatted = this.formatBusinessDay(item.businessDay);
					item.dayOfWeek = formatted.day;
					item.formattedDate = formatted.formattedDate;
				});

				// console.log(this.futureList)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #f7f7f7;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		
	}

	.time-pick {
		margin-top: 24rpx;
		width: 702rpx;
		height: 76rpx;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		padding: 0 24rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		justify-content: space-between;

		.time-num {
			font-family: Alibaba PuHuiTi 2.0;
			font-size: 28rpx;
			font-weight: 500;
			align-items: center;

			/* Black */
			color: #000000;

		}

		.time-center {
			margin-left: 20rpx;
			margin-right: 20rpx;
			font-family: Alibaba PuHuiTi 2.0;
			font-size: 24rpx;
			font-weight: 300;
		}

		.time-btn {
			width: 132rpx;
			height: 46rpx;
			border-radius: 10rpx;
			background: #066AFB;
			font-family: Alibaba PuHuiTi 2.0;
			font-size: 12px;
			font-weight: 500;
			color: #FFFFFF;
			text-align: center;
			line-height: 46rpx;
		}
	}

	.house-center {
		margin-top: 32rpx;
		display: flex;
		align-items: center;

		.center-left {
			font-family: Alibaba PuHuiTi 2.0;
			font-size: 20rpx;
			font-weight: 300;
			color: #000000;
		}

		.center-right {
			margin-left: 64rpx;
			display: flex;
			align-items: center;
			font-family: Alibaba PuHuiTi 2.0;
			font-size: 20rpx;
			font-weight: 300;
			color: #000000;
		}

		.center-btn1 {
			margin-left: 16rpx;
			width: 74rpx;
			height: 38rpx;
			text-align: center;
			line-height: 38rpx;
			background: #B0FFE4;
			font-family: Alibaba PuHuiTi 2.0;
			font-size: 20rpx;
			font-weight: 300;
		}
	}

	.house-table {
		margin-top: 24rpx;
		width: 100%;
		background-color: #FFFFFF;
		display: flex;

		.table-left {
			width: 150rpx;
			border-right: 1px solid #C4C4C4;

			.table-left-top {
				width: 100%;
				height: 100rpx;
				border-bottom: 1px solid #C4C4C4;
				position: relative;
			}

			.table-left-top::before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 179rpx;
				height: 100%;
				border-top: 1px solid #C4C4C4;
				/* 设置线条颜色和宽度 */
				border-left: 1px solid #C4C4C4;
				/* 设置线条颜色和宽度 */
				transform: rotate(33deg);
				transform-origin: top left;
				z-index: 1;
				/* 确保伪元素在内容之上 */
			}

			.table-left-title {
				position: absolute;
				top: 10rpx;
				right: 20rpx;
				font-family: Alibaba PuHuiTi 2.0;
				font-size: 14px;
				font-weight: 500;
			}

			.table-left-title2 {
				position: absolute;
				bottom: 10rpx;
				left: 20rpx;
				font-family: Alibaba PuHuiTi 2.0;
				font-size: 14px;
				font-weight: 500;
			}

			.house-list {
				border-bottom: 1px solid #C4C4C4;
			}

			.house-type {
				width: 100%;
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
				font-family: Alibaba PuHuiTi 2.0;
				font-size: 12px;
				font-weight: 300;
				color: #000000;
				white-space: nowrap; //禁止换行
				overflow: hidden;
				text-overflow: ellipsis; //...
			}

		}


		.table-right {

			display: flex;

			.right-top {

				.right-right-list {
					display: flex;
					align-items: center;
					// height: 100rpx;
					// width: 100%;
					border-bottom: 1px solid #C4C4C4;
				}

				.right-top-item {
					width: 100rpx;
					height: 100rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					font-family: Alibaba PuHuiTi 2.0;
					font-size: 24rpx;
					font-weight: 300;
					color: #000;
				}

				.num-list {
					// display: flex;
					// align-items: center;
					border-bottom: 1px solid #C4C4C4;
				}

				.num-item {
					height: 80rpx;
					width: 100rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					.num-btn {
						width: 80rpx;
						height: 76rpx;
						background: #FFF8C6;
						font-family: Alibaba PuHuiTi 2.0;
						font-size: 24rpx;
						font-weight: 300;
						color: #000;
						text-align: center;
						line-height: 76rpx;
					}

					.high-occupancy {

						background: #B0FFE4;
					}
				}
			}




		}
	}
</style>